<template>
    <view class="shopping-cart-box">
        <checkbox-group @change="checkboxChange">
            <view
                v-for="(item, index) in shopList"
                :key="index"
                class="shopping-cart-main"
            >
                <label>
                    <checkbox :value="index" />
                </label>
                <image
                    src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/logo.png" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="shopping-cart-main-img"
                ></image>
                <view class="shopping-cart-main-text">
                    <view class="shopping-cart-main-text-1">标题啊啊啊啊啊</view>
                    <!-- <view class="shopping-cart-main-text-2">标题啊啊啊啊啊</view> -->
                    <view class="shopping-cart-main-text-3">
                        <view class="shopping-cart-main-text-3-left">
                            积分兑换
                        </view>
                        <view class="shopping-cart-main-text-3-right">
                            ￥110.00
                        </view>
                    </view>
                    <view class="shopping-cart-main-text-4">
                        <view>兑换数量：</view>
                        <uni-number-box
                            v-model="commodityNum"
                            :min="1"
                            @change="commodityNumChange"
                        ></uni-number-box>
                    </view>
                </view>
            </view>
        </checkbox-group>
        
        <view class="shopping-cart-button">
            <button
                :class="['shopping-cart-button-default-btn']"
                style="position: fixed; left: 0; right: 0; bottom: 0; border-radius: 0;"
                @click="onSubmit" 
                
            >
                提交订单 ￥220.00
            </button>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { isPhone } from '@/utils/utils'
    import { getAppOrderListApi } from '@/apis'
    
    const popup1: Ref<any> = ref(null)
    const commodityNum: Ref<number> = ref(1)
    const address: Ref<string> = ref('')
    const addressId: Ref<number> = ref(0)
    const formData: Ref<any> = ref({})
    const shopList: Ref<any[]> = ref([
        {
            
        },
        {
            
        },
        {
            
        },
        {
            
        },
        {
            
        },
        {
            
        },
        {
            
        }
    ])
    
    onLoad((val: any) => {
        console.log(val)
        if (val.addressId) {
            addressId.value = val.addressId
        }
        if (val.address) {
            address.value = val.address
        }
        if (val.commodityNum) {
            commodityNum.value = val.commodityNum
        }
        getAppOrderListApi({
            id: val.id
        }).then((res: any) => {
            formData.value = res
           console.log(res.data)
        }).finally(() => {
        })
    })
    
    const commodityNumChange = (val: any) => {
        console.log(val)
    }
    const onSubmit = () => {
        uni.showModal({
            showCancel: true,
            title: '温馨提示',
            content: '是否确定兑换？',
            success: function (res3) {
                // 调接口
                uni.redirectTo({
                    url: '/pages/mallOrders/mallOrders'
                });
                // uni.switchTab({
                // 	url: '/pages/mallOrders/mallOrders'
                // });
                // if (res3.confirm) {
                // 	console.log('用户点击确定');
                // } else if (res3.cancel) {
                // 	console.log('用户点击取消');
                // }
            }
        });
    }
    const checkboxChange = (e: any) => {
        console.log(e)
    }
</script>

<style lang="scss" scoped>
    .shopping-cart-box {
        background: #f2f2f2;
        // width: 600rpx; 
        box-sizing: border-box; 
        // padding: 0 0 30rpx 0; 
        border-radius: 50rpx 50rpx 0rpx 0rpx;
        .shopping-cart-header {
            display: flex;
            // justify-content: space-between;
            align-items: center;
            height: 100rpx;
            background: #fff;
            .shopping-cart-header-main {
                flex: 1;
                padding: 0 10rpx;
                font-size: 26rpx
            }
            .shopping-cart-header-icon-img {
                width: 50rpx;
                height: 50rpx
            }
            
        }
        .shopping-cart-main {
            background: #fff;
            display: flex;
            align-items: center;
            margin-bottom: 1rpx;
            box-sizing: border-box;
            padding: 10rpx;
            .shopping-cart-main-img {
                width: 200rpx;
                height: 200rpx
            }
            .shopping-cart-main-text {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                box-sizing: border-box;
                padding-left: 10rpx;
                .shopping-cart-main-text-1 {
                    
                }
                .shopping-cart-main-text-2 {
                    color: rgb(153, 153, 153);
                    font-size: 26rpx;
                }
                .shopping-cart-main-text-3 {
                    display: flex;
                    justify-content: flex-end;
                    .shopping-cart-main-text-3-left {
                        height: 45rpx;
                        background: #f2403c;
                        box-sizing: border-box;
                        padding: 5rpx;
                        border-radius: 10rpx;
                        font-size: 24rpx;
                        color: #fff;
                    }
                    .shopping-cart-main-text-3-right {
                       // text-align: right;
                       color: #f2403c;
                       font-weight: bold;
                       padding-left: 10rpx;
                    }
                }
                .shopping-cart-main-text-4 {
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
        .shopping-cart-button {
            background-color: #fff;
            height: 100rpx;
            .shopping-cart-button-disabled-btn {
                background-color: rgba(41, 121, 255, 0.6) !important;
                color: #fff9f9 !important;
            }
            .shopping-cart-button-default-btn {
                background-color: #2979ff !important;
                color: #fff !important;
            }
        }
    }
</style>
